<template>
  <van-pull-refresh v-model="loading" @refresh="onLoad">
    <form-template v-if="!loading" class="form" v-model:form="form" :options="options" readonly></form-template>
  </van-pull-refresh>
</template>

<script setup>
  import {MemberType, MemberStatus, CertType, ExpireStatus} from '@/utils/enum.js'
  const route = useRoute()
  const loading = ref(false)
  const detailId = ref()
  const form = ref({})
  const options = ref([
    {label: '证照保管单位', key: 'custodyUnit', type: 'textarea'},
    {label: '所属二级单位', key: 'secondaryUnit', type: 'textarea'},
    {label: '持有人', key: 'holder', type: 'textarea'},
    {label: '人员类型', key: 'memberType', type: 'picker', columns: MemberType},
    {label: '职务', key: 'duties', type: 'textarea'},
    {label: '人员状态', key: 'memberStatus', type: 'picker', columns: MemberStatus},
    {label: '证照类型', key: 'certType', type: 'picker', columns: CertType},
    {label: '证照号码', key: 'certNumber', type: 'textarea'},
    {label: '证照有效期', key: 'expirationDate', type: 'textarea'},
    {label: '是否过期', key: 'expireStatus', type: 'picker', columns: ExpireStatus},
    {label: '备注', key: 'remark', type: 'textarea'},
    {label: '附件', key: 'attachmentUrl', type: 'upload'},
  ])
  const onLoad = () => {
    loading.value = true
    $get(`/api/v1/cert/info/${detailId.value}`)
      .then(res => {
        const {data} = res
        form.value = {
          ...data,
          memberType: MemberType.find(item => item.value === data.memberType)?.text || data.memberType,
          memberStatus: MemberStatus.find(item => item.value === data.memberStatus)?.text || data.memberStatus,
          certType: CertType.find(item => item.value === data.certType)?.text || data.certType,
          expireStatus: ExpireStatus.find(item => item.value === data.expireStatus)?.text || data.expireStatus,
          expirationDate:
            data.expirationStartDate && data.expirationEndDate
              ? `${data.expirationStartDate?.split(' ')[0]} 至 ${data.expirationEndDate?.split(' ')[0]}`
              : '',
        }
      })
      .finally(() => {
        loading.value = false
      })
  }
  onMounted(() => {
    detailId.value = route.query?.id
    if (detailId.value) onLoad()
  })
</script>

<style scoped>
  .form {
    margin-top: 32px;
  }
</style>
